import { useModel, useParams } from 'umi';
import { Button, Card, Form, Input, Radio, Select } from "antd"

export default ({devices}) => {
  const {hosts, computePath} = useModel('networkModel')
  const {getPath} = useModel('networks')
  const [form] = Form.useForm();
  const onFormLayoutChange = () => {}
  const params  = useParams();

  const sourceOptions = Object.values(devices).map(host => ({
    label: host.id,
    value: host.id,
  }))

  const headerOptions = Object.values(hosts).map(host => ({
    label: host.ip,
    value: host.ip,
  }))

  const onFinish = (values: any) => {
    console.log(values)
    const {src, dst} = values;
    getPath(params.name, src, dst);
  };

  return (
    <Card size="small" title='Network Query' >
      <Form
      layout='vertical'
      form={form}
      onValuesChange={onFormLayoutChange}
      onFinish={onFinish}
    >
    <Form.Item name="src" label="Source" rules={[{ required: true }]}>
      <Select
        placeholder="Select a source"
        // onChange={onGenderChange}
        allowClear
        options={sourceOptions}
      >
      </Select>
    </Form.Item>
      <Form.Item name="dst" label="Header (Dest IP)" rules={[{ required: true }]}>
        <Input placeholder='Input an IP address'/>
        {/* <Select
          placeholder="Select a header"
          // onChange={onGenderChange}
          allowClear
          options={headerOptions}
        >
        </Select> */}
      </Form.Item>
      
      <Form.Item>
        <Button htmlType="submit" type="primary">Submit</Button>
      </Form.Item>
    </Form>
    </Card>
  )
}